<template>
  <div class="app-container">
    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="toAdd()">
      新增
    </el-button>
    <el-table ref="table" v-loading="loading" :data="data" style="width: 100%">
      <el-table-column prop="imageList" label="轮播图">
        <template slot-scope="scope">
          <img :src="scope.row.imageList[0]" style="width: 100px; height: 100px;" />
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          {{ scope.row.type == 1 ? "衣食住行" : "关于我们" }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="toAdd(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="toDel(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="visible" title="素材上传" width="800px">
      <el-form ref="form" :model="formData" :inline="false" size="small" label-width="120px">
        <el-form-item label="类型" prop="type">
          <!-- 类型 0.话术 1.指导建议 -->
          <el-select v-model="formData.type" placeholder="请选择">
            <el-option label="衣食住行" :value="1" />
            <el-option label="关于我们" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="轮播图" prop="imageArr">
          <div class="avatar-uploader el-upload" v-for="(t, idx) in formData.imageArr" :key="idx">
            <img :src="t" class="avatar" />
            <div class="btn">
              <el-button size="36" type="text" icon="el-icon-delete" @click.stop="deleteImg(t)"></el-button>
            </div>
          </div>
          <el-upload
            v-loading="imageArr_loading"
            class="avatar-uploader el-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="(params) => uploadRequest(params, 'imageArr')"
            :show-file-list="false"
          >
            <div class="upload-text">选择图片</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="visible = false">取消</el-button>
        <el-button v-loading="subloading" :disabled="subloading" type="primary" @click="submit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { configDel, configList, configSave } from "@/api/mini/material";
import { uploadFile } from "@/api/data";
export default {
  data() {
    return {
      loading: false,
      data: [],
      visible: false,
      formData: {
        type: 1,
        imageArr: [],
        id: "",
      },
      imageArr_loading: false,
      subloading: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    toAdd(row = {}) {
      this.formData = { type: row.type || 1, imageArr: row.imageList || [], id: row.id || "" };
      this.visible = true;
    },
    toDel(row) {
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        configDel(row.id).then((res) => {
          this.$message.success("修改成功");
          this.getData();
        });
      });
    },
    submit() {
      let obj = { ...this.formData, imageArr: this.formData.imageArr.join(",") };
      this.subloading = true;
      configSave(obj)
        .then((res) => {
          this.subloading = false;
          this.$message.success("添加成功");
          this.visible = false;
          this.getData();
        })
        .catch((err) => (this.subloading = false));
    },
    uploadRequest(params, key) {
      this[`${key}_loading`] = true;
      uploadFile(params).then((res) => {
        this[`${key}_loading`] = false;
        this.formData[key].push(res.data);
      });
    },
    deleteImg(t) {
      this.formData.imageArr = this.formData.imageArr.filter((x) => x != t);
    },
    getData() {
      // type: 类型 1.衣食住行 2.关于我们,不传则全部
      configList({ type: "" }).then((res) => {
        this.data = res.data;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.avatar-uploader,
.el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px !important;
  height: 178px;
  display: inline-block;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409eff;
}

.upload-text {
  font-size: 14px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
  margin: 0 auto;
  display: inline-block;
}

.avatar {
  width: 178px;
  height: 178px;
  display: inline-block;
  object-fit: cover;
}

.btn {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 178px !important;
  height: 178px;
  border-radius: 0 6px 0 6px;
  text-align: center;
  line-height: 178px;
}

.avatar-uploader:hover {
  // 鼠标悬浮显示按钮
  .btn {
    display: block;
  }
}
</style>
